<template>
  <div>
<div class="item goods_item" v-for="item in arr" :key="item.id">
        <router-link :to="'/detail/'+item.id">
          <img :src="$pre+item.img" class alt />
          <div class="goods_price">
            <h3>{{item.goodsname}}</h3>
            <h4 class="text">现价格:￥{{item.market_price}}</h4>
            <h4 class="yuan_price">
              <del>原价格:￥{{item.price}}</del>
            </h4>
            <div class="buy">
              <button class="buy_btn">双11限购</button>
            </div>
            <span>3565评论</span><span>99%好评</span>
          </div>
        </router-link>
      </div>
    <!-- 搜索提示 -->
<van-empty v-if="arr.length==0" image="search" description="暂无数据" />
    <!-- <div v-if="arr.length==0">暂无数据</div> -->
  </div>
</template>

<script>
export default {
  props: ["arr"]
};
</script>

<style scoped>

.xuan_card {
  width: 100vw;
  /* background-color: aquamarine; */
  margin-top: 0.25rem;
}
.xuan_btn {
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  padding: 0 .5rem;
}
.xuan_btn button {
  border: none;
  background-color: #fff;
  color: #f2a83b;
  font-size: 0.26rem;
  flex: 1;
}
.active {
  background-color: #f2a83b !important;
  color: #fff !important;
  font-size: large !important;
}
.goods_item {
  overflow: hidden;
  margin: 0.2rem auto;
  /* pa */
  width: 5.76rem;
  height: 2.7rem;
  border: 0.01rem solid #ccc;
}
.goods_item img {
  width: 1.5rem;
  height: 1.95rem;
  margin-top: 0.55rem;
  margin-left: 0.15rem;
}
.goods_price {
  display: inline-block;
  margin-left: 0.3rem;
  margin-top: 0.55rem;
}
.goods_price h3 {
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.26rem;
  color: #252525;
}
.goods_price h4 {
  font-size: 0.24rem;
  line-height: 0.4rem;
  height: 0.4rem;
}
.goods_price .text {
  color: #ff7e6b;
}

.goods_price .buy_btn {
  border: none;
  background-color: none;
  width: 1.38rem;
  height: 0.45rem;
  background-color: #ff7e6b;
  font-size: 0.24rem;
  line-height: 0.45rem;
  color: #fff;
  border-radius: 0.05rem;
  margin-top: .1rem;
}

.goods_price span{
  font-size: .2rem;
  color: #999;
  margin-right: 0.1rem;
}
</style>